<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	#div1 input {background: white;}
	#div1 input.active {background: yellow;}
	#div1 div {width: 200px; height: 200px; background: #CCC; display: none;}
</style>
<script>
	window.onload=function()
	{
			new TabSwitch('div1');
	};
	
	function TabSwitch(id)
	{
		var _this = this;
		var oDiv = document.getElementById(id);
		this.aBtn = oDiv.getElementsByTagName('input');
		this.aDiv = oDiv.getElementsByTagName('div');
		
		for(var i =0 ; i<this.aBtn.length;i++ )
			{
						this.aBtn[i].index=i;
						this.aBtn[i].onclick=function()
						{
								_this.test();
						};
			}
	};
	
TabSwitch.prototype.test = function()
{
		alert(this);
		for(var i=0;i<this.aBtn.length; i++)
			{
				this.aBtn[i].className = '';
				this.aDiv[i].style.display='none';
			}

		this.className = 'active';
		this.aDiv[this.index].style.display = 'block';
};
		
</script>
</head>

<body>
<div id="div1">
	<input type="button" class="active" value="aaa">
	<input type="button" value="bbb">
	<input type="button" value="ccc">
	<div style="display: block;">aaa</div>
	<div>asda</div>
	<div>ewrwew</div>
</div>
</body>
</html>
